import React, { FC, ReactNode } from 'react';
// import './index.module.less';

const LoadingView: FC<{ text?: string }> = props => {
  const { text } = props;
  return (
    <div className="container">
      <div className="content">
        <div className="img">
          <img
            src="https://i3.cathay-ins.com.cn/prod/posts/916447e82a8770b9dfe6dec9c28f0c82.gif"
            alt="loading"
          />
        </div>
        <div className="text">{text || ''}</div>
      </div>
    </div>
  );
};

const ErrorView: FC<{ text?: string }> = props => {
  const { text } = props;
  return (
    <div className="container">
      <div className="content">
        <div className="img">
          <img
            src="https://i3.cathay-ins.com.cn/prod/posts/71475a697c6793e4253444428f042bd4.png"
            alt="error"
          />
        </div>
        <div className="text">{text || ''}</div>
      </div>
    </div>
  );
};

const StatusView: FC<{
  status?: 'loading' | 'success' | 'error' | 'noData';
  text?: string;
  children?: ReactNode;
}> = props => {
  const { children, text, status = 'success' } = props;
  return (
    <>
      {(status === 'success' && children) || null}
      {status === 'loading' && <LoadingView text={text} />}
      {status === 'noData' && <ErrorView text={text} />}
      {status === 'error' && <ErrorView text={text} />}
    </>
  );
};
export default StatusView;
